{% extends "base.html" %}

{% block title %}上传文件 - 知识图谱系统{% endblock %}

{% block content %}
<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-8 col-lg-6">
            <div class="card shadow-sm mt-4">
                <div class="card-header bg-primary text-white">
                    <h5 class="mb-0">
                        <i class="fas fa-upload me-2"></i>上传文件创建知识图谱
                    </h5>
                </div>
                <div class="card-body p-4">
                    <form method="POST" enctype="multipart/form-data">
                        <div class="mb-3">
                            <label for="title" class="form-label">图谱标题 <span class="text-danger">*</span></label>
                            <input type="text" class="form-control" id="title" name="title" required
                                   placeholder="请输入知识图谱标题">
                        </div>

                        <div class="mb-3">
                            <label for="description" class="form-label">图谱描述</label>
                            <textarea class="form-control" id="description" name="description" rows="3"
                                      placeholder="请简要描述这个知识图谱的内容和用途"></textarea>
                        </div>

                        <div class="mb-3">
                            <label for="file" class="form-label">选择文件 <span class="text-danger">*</span></label>
                            <input type="file" class="form-control" id="file" name="file" required
                                   accept=".xlsx,.xls,.json,.csv">
                            <div class="form-text">
                                支持的文件格式：Excel (.xlsx, .xls)、JSON (.json)、CSV (.csv)
                            </div>
                        </div>

                        <div class="mb-4">
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" id="is_public" name="is_public">
                                <label class="form-check-label" for="is_public">
                                    <i class="fas fa-globe me-1"></i>公开此知识图谱
                                </label>
                                <div class="form-text">
                                    公开后，所有用户都可以查看此图谱，但无法下载
                                </div>
                            </div>
                        </div>

                        <div class="d-grid gap-2 d-md-flex justify-content-md-end">
                            <a href="{{ url_for('dashboard') }}" class="btn btn-secondary">
                                <i class="fas fa-arrow-left me-2"></i>返回
                            </a>
                            <button type="submit" class="btn btn-primary">
                                <i class="fas fa-upload me-2"></i>上传并创建
                            </button>
                        </div>
                    </form>
                </div>
            </div>

            <!-- 文件格式说明 -->
            <div class="card mt-4">
                <div class="card-header">
                    <h6 class="mb-0"><i class="fas fa-info-circle me-2"></i>文件格式说明</h6>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-6">
                            <h6>Excel/CSV 格式</h6>
                            <p class="small text-muted">
                                前两列应包含节点关系数据：<br>
                                • 第一列：源节点<br>
                                • 第二列：目标节点<br>
                                示例：Python → 编程语言
                            </p>
                        </div>
                        <div class="col-md-6">
                            <h6>JSON 格式</h6>
                            <p class="small text-muted">
                                应包含 nodes 和 edges 数组：<br>
                                • nodes: [{id, label, group}]<br>
                                • edges: [{source, target, id}]
                            </p>
                        </div>
                    </div>

                    <div class="alert alert-info mt-3">
                        <h6><i class="fas fa-lightbulb me-2"></i>示例数据</h6>
                        <p class="mb-2">您可以下载示例文件来了解正确的数据格式：</p>
                        <div class="d-flex gap-2">
                            <button class="btn btn-sm btn-outline-primary" onclick="downloadSampleExcel()">
                                <i class="fas fa-download me-1"></i>Excel示例
                            </button>
                            <button class="btn btn-sm btn-outline-primary" onclick="downloadSampleJSON()">
                                <i class="fas fa-download me-1"></i>JSON示例
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
// 文件选择预览
document.getElementById('file').addEventListener('change', function(e) {
    const file = e.target.files[0];
    if (file) {
        const fileSize = (file.size / 1024 / 1024).toFixed(2);
        if (fileSize > 16) {
            alert('文件大小不能超过16MB');
            e.target.value = '';
            return;
        }

        // 如果标题为空，使用文件名作为默认标题
        const titleInput = document.getElementById('title');
        if (!titleInput.value) {
            const fileName = file.name.split('.')[0];
            titleInput.value = fileName;
        }
    }
});

// 下载示例Excel文件
function downloadSampleExcel() {
    const data = [
        ['源节点', '目标节点'],
        ['Python', '编程语言'],
        ['JavaScript', '编程语言'],
        ['机器学习', 'Python'],
        ['Web开发', 'JavaScript'],
        ['数据科学', 'Python'],
        ['前端开发', 'JavaScript'],
        ['深度学习', '机器学习'],
        ['React', 'JavaScript'],
        ['Django', 'Python']
    ];

    let csv = data.map(row => row.join(',')).join('\n');
    csv = '\uFEFF' + csv; // 添加BOM以支持中文

    const blob = new Blob([csv], { type: 'text/csv;charset=utf-8;' });
    const link = document.createElement('a');
    link.href = URL.createObjectURL(blob);
    link.download = '知识图谱示例.csv';
    link.click();
}

// 下载示例JSON文件
function downloadSampleJSON() {
    const data = {
        "nodes": [
            {"id": "Python", "label": "Python", "group": 0, "size": 25},
            {"id": "JavaScript", "label": "JavaScript", "group": 0, "size": 25},
            {"id": "编程语言", "label": "编程语言", "group": 1, "size": 30},
            {"id": "机器学习", "label": "机器学习", "group": 2, "size": 20},
            {"id": "Web开发", "label": "Web开发", "group": 2, "size": 20},
            {"id": "数据科学", "label": "数据科学", "group": 2, "size": 20}
        ],
        "edges": [
            {"source": "Python", "target": "编程语言", "id": "edge_1"},
            {"source": "JavaScript", "target": "编程语言", "id": "edge_2"},
            {"source": "机器学习", "target": "Python", "id": "edge_3"},
            {"source": "Web开发", "target": "JavaScript", "id": "edge_4"},
            {"source": "数据科学", "target": "Python", "id": "edge_5"}
        ]
    };

    const blob = new Blob([JSON.stringify(data, null, 2)], { type: 'application/json' });
    const link = document.createElement('a');
    link.href = URL.createObjectURL(blob);
    link.download = '知识图谱示例.json';
    link.click();
}

// 表单验证
document.querySelector('form').addEventListener('submit', function(e) {
    const title = document.getElementById('title').value.trim();
    const file = document.getElementById('file').files[0];

    if (!title) {
        e.preventDefault();
        alert('请输入图谱标题');
        return;
    }

    if (!file) {
        e.preventDefault();
        alert('请选择要上传的文件');
        return;
    }

    // 显示加载状态
    const submitBtn = document.querySelector('button[type="submit"]');
    submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin me-2"></i>上传中...';
    submitBtn.disabled = true;
});
</script>
{% endblock %}